import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

interface MenuItem {
  key: string;
  label: string;
  path: string;
  icon: string;
}

const Sidebar: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems: MenuItem[] = [
    { key: 'home', label: '首页', path: '/home', icon: '🏠' },
    { key: 'users', label: '用户管理', path: '/users', icon: '👥' },
    { key: 'products', label: '商品管理', path: '/products', icon: '📦' },
    { key: 'categories', label: '分类管理', path: '/categories', icon: '📂' },
    { key: 'orders', label: '订单管理', path: '/orders', icon: '📋' },
    { key: 'banners', label: '轮播图管理', path: '/banners', icon: '🖼️' },
    { key: 'ai-inquiry', label: 'AI咨询管理', path: '/ai-inquiry', icon: '🤖' },
    { key: 'settings', label: '系统设置', path: '/settings', icon: '⚙️' },
  ];

  const handleLogout = () => {
    localStorage.removeItem('isLogin');
    navigate('/login');
  };

  return (
    <div style={{
      width: 240,
      height: '100vh',
      background: '#001529',
      color: 'white',
      position: 'fixed',
      left: 0,
      top: 0,
      overflowY: 'auto',
      boxShadow: '2px 0 8px rgba(0,0,0,0.15)'
    }}>
      {/* Logo区域 */}
      <div style={{
        height: 64,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderBottom: '1px solid #303030',
        fontSize: 18,
        fontWeight: 'bold'
      }}>
        白喜事管理系统
      </div>

      {/* 导航菜单 */}
      <nav style={{ padding: '16px 0' }}>
        {menuItems.map(item => (
          <div
            key={item.key}
            onClick={() => navigate(item.path)}
            style={{
              padding: '12px 24px',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              background: location.pathname === item.path ? '#1890ff' : 'transparent',
              color: location.pathname === item.path ? 'white' : '#d9d9d9',
              transition: 'all 0.3s',
              borderRight: location.pathname === item.path ? '3px solid #fff' : 'none'
            }}
            onMouseEnter={(e) => {
              if (location.pathname !== item.path) {
                e.currentTarget.style.background = '#1890ff20';
                e.currentTarget.style.color = 'white';
              }
            }}
            onMouseLeave={(e) => {
              if (location.pathname !== item.path) {
                e.currentTarget.style.background = 'transparent';
                e.currentTarget.style.color = '#d9d9d9';
              }
            }}
          >
            <span style={{ fontSize: 16 }}>{item.icon}</span>
            <span>{item.label}</span>
          </div>
        ))}
      </nav>

      {/* 退出登录 */}
      <div style={{
        position: 'absolute',
        bottom: 24,
        left: 0,
        right: 0,
        padding: '0 24px'
      }}>
        <button
          onClick={handleLogout}
          style={{
            width: '100%',
            padding: '12px',
            background: '#ff4d4f',
            color: 'white',
            border: 'none',
            borderRadius: 6,
            cursor: 'pointer',
            fontSize: 14,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            transition: 'background 0.3s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = '#ff7875'}
          onMouseLeave={(e) => e.currentTarget.style.background = '#ff4d4f'}
        >
          <span>🚪</span>
          <span>退出登录</span>
        </button>
      </div>
    </div>
  );
};

export default Sidebar; 